<template>
	<view class="content" :id="`moreLine${lineId}`" :style="style">
		<!-- <u-parse :html="text" :lazy-load="true"></u-parse> -->
		<u-parse :html="textValue"></u-parse>
		<!-- <view class="more">全文</view> -->
	</view>
</template>

<script>
	export default {
		components: {
		},
		props: {
			lineId: {
				type: [String, Number],
				default: ''
			},
			text: {
				type: String,
				default: ''
			},
			style: {
				type: String,
				default: ''
			},
		},
		mounted() {
			// this.$nextTick(() => {
			// 	setTimeout(() => {
			// 		const id = '#moreLine' + this.lineId;
			// 		console.log('mounted22222222222', this.lineId, id);
			// 		const query = wx.createSelectorQuery()
			// 		query.select(id).boundingClientRect()
			// 		query.exec(function(res) {
			// 			console.log('打印高度',res[0].height);
			// 			console.log('打印demo的元素的信息',res);
			// 		})
			// 	}, 1000);
			// })
		},
		data() {
			return {
				expande: true,
				needShowExpande: false,
			}
		},
		computed: {
			textValue() {
				return this.text ? this.text.replace(/\n|\r\n/g,'<br/>') : '';
			},
		},
		methods: {
			expandeClick() {
				// console.log('expandeClick')
				this.expande = !this.expande
			},
			click: function() {
				// console.log('this.$refs.moreLine', this.$refs, this.$refs.moreLine);
			},
		}
	}
</script>

<style scoped lang="less">
.content {
	word-break: break-all;
	margin-top: 30rpx;
	font-family: PingFangSC-Regular;
	font-size: 28rpx;
	color: #4D4D4D;
	line-height: 40rpx;
	//
	max-height: 120rpx;//需要设置高度
	//必须结合的属性，将对象作为弹性伸缩盒对象的子元素的排列仿古式
	display:-webkit-box;
	-webkit-box-orient:vertical;
	text-overflow:ellipsis;
	-webkit-line-clamp:3;//例如超过3行显示省略号
	overflow:hidden;
	position: relative;
	white-space: pre-wrap;
	.more {
		font-family: PingFangSC-Regular;
		font-size: 28rpx;
		line-height: 40rpx;
		position: absolute;
		bottom: 0;
		color: #3470FF;
		right: 8rpx;
		z-index: 9;
		cursor: pointer;
	}
}
// .content:after{
// 	content: "...";
// 	position: absolute;
// 	bottom: 0;
// 	right: 0;
// 	padding-right: 60rpx;
// 	padding-left: 4rpx;
// 	background: linear-gradient(to right, transparent, #fff 0%);
// }
</style>
